<template>
    <div>
      <el-row style="background-color: #dadada" type="flex" align="middle">
        <el-col :span="1">
          <el-button native-type="button" icon="el-icon-arrow-left" style="border-width: 0px;background-color: #dadada" @click="backClick">返回</el-button>
        </el-col>
        <el-col :span="5" :offset="8">
          <label >{{title}}</label>
        </el-col>
      </el-row>
      <el-row>
        <image-upload ref="upload" :fileList="fileList" :urlList="urlList" :multiple="true" :limitCount="60"></image-upload>
      </el-row>
      <el-row>
        <div>
          标题  <el-input v-model="inputTitle" placeholder="请输入标题" style="width: 300px">{{inputTitle}}</el-input>
        </div>
      </el-row>
      <el-row>
        <div>
          外链  <el-input v-model="externalLink" placeholder="请输入外链" style="width: 300px">{{externalLink}}</el-input>
        </div>
      </el-row>
      <el-row type="flex" justify="space-around">
        <el-col>
          原价  <el-input v-model="originalPrice" placeholder="请输入原价" style="width: 300px">{{originalPrice}}</el-input>
        </el-col>
        <el-col>
          折后价  <el-input v-model="discountPrice" placeholder="请输入折后价" style="width: 300px">{{discountPrice}}</el-input>
        </el-col>
      </el-row>
      <el-row>
        <div>
          吱口令  <el-input v-model="zhiCommand" placeholder="请输入吱口令" style="width: 500px">{{zhiCommand}}</el-input>
        </div>
      </el-row>
      <el-row>
        <div>
          <textarea class="introduce" placeholder="请输入详细介绍" v-model="introduce">{{introduce}}</textarea>
        </div>
      </el-row>


      <el-row>
        <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
        <el-button type="info" @click="cancel" plain >取消</el-button>
      </el-row>

    </div>

</template>

<script>
  import ImageUpload from './Common/ImageUpload'
  export default {
    name: 'AddBoardDetail',
    data(){
      return{
        title:'新增详情',

        loading: false,
        urlList:[],
        fileList:[],

        boardId:this.$route.query.boardId,
        detailId:this.$route.query.detailId,
        externalLink:'',
        originalPrice:'',
        discountPrice:'',
        zhiCommand:'',
        inputTitle:'',
        introduce:'',
        uploadPicUrl: "", //提交到后台图片地址

      }
    },
    components:{
      ImageUpload
    },
    mounted(){
      if (this.detailId > 0){
        this.title='编辑详情'
        this.loadDetail()
      }
    },

    methods:{
      // 获取榜单详情信息
      loadDetail(){
        this.getAxios('boardDetail/load',{
          id:this.detailId
        }).then(res => {
          this.introduce = res.data.detail
          this.inputTitle = res.data.title
          this.zhiCommand = res.data.zhiCommand
          this.originalPrice = res.data.originalPrice
          this.discountPrice = res.data.discountPrice
          this.externalLink = res.data.externalLink
          let images = res.data.images
          if (!this.isEmpty(images)){
            let result=images.split(",");
            result.forEach((val,index) => {
              let obj = new Object();
              obj.url = val + '?imageView2/1/w/800/h/600';
              obj.name = '图片' + (index + 1)
              this.fileList.push(obj);
              this.urlList.push({
                url:val
              })
            })
          }

        }).catch(error => {
          this.$message({
            type: 'info',
            message: error.msg
          })
        })
      },
      // 取消
      cancel(){
        return this.$confirm("取消本次操作?").then(() => {
          this.backClick()
        })
      },
      //提交数据到后台
      handleSubmit() {

        if (this.boardId < 1){
          this.$message({
            type: 'info',
            message: '请选择榜单'
          })
          return
        }
        if (this.inputTitle.length < 1){
          this.$message({
            type: 'info',
            message: '请输入标题'
          })
          return
        }
        var urls = new Array()
        for (let i = 0, len = this.urlList.length; i < len; i++) {
          var obj = this.urlList[i]
          urls.push(obj.url)
        }
        this.uploadPicUrl = urls.join(",")
        let url = this.detailId > 0 ? 'boardDetail/update' : 'boardDetail/insert'
        this.getAxios(url,{
          id:this.detailId,
          boardId:this.boardId,
          title:this.inputTitle,
          userId:1,
          detail:this.introduce,
          images:this.uploadPicUrl,
          zhiCommand:this.zhiCommand,
          originalPrice:this.originalPrice,
          discountPrice:this.discountPrice,
          externalLink:this.externalLink,
        }).then(res => {
          this.inputTitle = ''
          this.introduce = ''
          this.$refs.upload.clearAllFile()
          this.urlList.removeAll()
          this.$message({
            type: 'success',
            message: '新增成功!'
          });
          this.backClick()
        }).catch(error => {
          this.$message({
            type: 'info',
            message:error.msg
          });
        })
      },
      backClick(){
        this.$router.back()
      }
    }
  }
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  &:last-child {
     margin-bottom: 0;
   }
  }
  .introduce{
    width: 60%;
    height: 150px;
  }
</style>
